<template>
  <div class="box">
    <!--<h3>此设置为表单失去焦点提交数据,若表单数据没有发生改变则不会发送请求</h3>-->
    <el-form ref="form"
             v-loading="loading"
             label-width="160px">
      <el-form-item v-for="(item,index) in publicData"
                    :label="item.name"
                    :key="index">
        <el-input :value="item.money"
                  style="width:300px;"
                  @blur="handleBlur(item,$event)">
          <template slot="append">{{item.unit}}</template>
        </el-input>
        <span class="help">{{item.help}}</span>
      </el-form-item>
      <el-form-item label="提示">
        鼠标释放焦点后修改数据！
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "settingsPublic",
  data () {
    return {
      publicData: [], //公共设置数据
      oldPublicData: '',
      loading: false
    }
  },
  methods: {
    async init () { //页面初始化渲染数据
      this.loading = true;
      let res = await this.api.settingsPublic({})
      this.publicData = res.data.filter((item,index) => {
        if(
            index === 0 ||
            index === 2 ||
            index === 6 ||
            index === 7) {
          return item
        }else if(index === 1 ) {
          return item['name'] = '服务押金'
        }
      });
      // let helps = [
      //   ['注:每售出一张邦保养卡所得金额', '加盟费', '注:工时费', '每月任务', '连续多少次被投诉关停维修厂', '连续多少次未完成任务关停维修厂', '物料预警值', '注:维修厂提现间隔时间'],
      //   ['￥', '￥', '%', '/月', '次', '次', '%', '天']
      // ];
      let helps = [
              ['注:每售出一张邦保养卡所得金额','服务押金','注:工时费','物料预警值','注:维修厂提现间隔时间'],
              ['￥','￥','%','%','天']
      ];
      for (let i in this.publicData) {
        this.publicData[i]['help'] = helps[0][parseInt(i)]
        this.publicData[i]['unit'] = helps[1][parseInt(i)]
      }
      this.loading = false;
    },
    async handleBlur (value, e) { //表单失去焦点是修改数据
      if (value.money == e.target.value || this.oldPublicData == e.target.value) return false;
      this.oldPublicData = e.target.value;
      let argumentsStr = {
        id: value.id,
        type: value.type,
        money: e.target.value,
        name: value.name
      }
      let res = await this.api.mdfSettingsPublic(argumentsStr)
      this.$message({
        message: res.msg,
        type: res.code == 1 ? 'success' : 'error',
        duration: 800
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.box {
  padding-top:20px;
}
span.help {
  color: #606266;
  vertical-align: middle;
  margin-left: 20px;
  font-size: 13px;
}
</style>
